<!DOCTYPE html>
<html>

<head>
  <title>从零开始学习React</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    #preview-contents {
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>
    <h4 id="react起步式mvc-jsx">React起步式：MVC &amp; JSX</h4>
    <p><strong>MVC VS MVVM</strong></p>
    <p><img longdesc="./1657104682486.png" width="600" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>
    <p><img longdesc="./1657104700904.png" width="600" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p><strong>JSX基础知识</strong></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * JSX：javascript and xml（html）</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   1.最外层只能有一个根元素节点</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   2.&lt;&gt;&lt;/&gt; fragment空标记，即能作为容器把一堆内容包裹起来，还不占层级结构</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   3.动态绑定数据使用{}，大括号中存放的是JS表达式</span>
</div><div class="hljs-line"><span class="hljs-comment"> *      =&gt; 可以直接放数组：把数组中的每一项都呈现出来</span>
</div><div class="hljs-line"><span class="hljs-comment"> *      =&gt; 一般情况下不能直接渲染对象</span>
</div><div class="hljs-line"><span class="hljs-comment"> *      =&gt; 但是如果是JSX的虚拟DOM对象，是直接可以渲染的</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   4.设置行内样式，必须是 style={{color:'red'...}}；</span>
</div><div class="hljs-line"><span class="hljs-comment"> *     设置样式类名需要使用的是className；</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   5.JSX中进行的判断一般都要基于三元运算符来完成</span>
</div><div class="hljs-line"><span class="hljs-comment"> *   6.JSX中遍历数组中的每一项，动态绑定多个JSX元素，一般都是基于数组中的map来实现的</span>
</div><div class="hljs-line"><span class="hljs-comment"> *     =&gt;和vue一样，循环绑定的元素要设置key值（作用：用于DOM-DIFF差异化对比）</span>
</div><div class="hljs-line"><span class="hljs-comment"> * JSX语法具备过滤效果（过滤非法内容），有效防止XSS攻击（扩展思考：总结常见的XSS攻击和预防方案？）</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div></code></pre>

    <p><strong>JSX底层渲染机制</strong> <br>
      <code>createElement</code>
    </p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> createElement = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createElement</span>(<span class="hljs-params">type, props, ...children</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-comment">// virtual:[ˈvɜːtʃuəl] </span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> len = children.length;
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> virtualDOM = {
</div><div class="hljs-line">        type,
</div><div class="hljs-line">        <span class="hljs-attr">props</span>: {}
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (props !== <span class="hljs-literal">null</span>) virtualDOM.props = { ...props };
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (len === <span class="hljs-number">1</span>) virtualDOM.props.children = children[<span class="hljs-number">0</span>];
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (len &gt; <span class="hljs-number">1</span>) virtualDOM.props.children = children;
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> virtualDOM;
</div><div class="hljs-line">};
</div></code></pre>

    <p><code>render</code></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> render = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">render</span>(<span class="hljs-params">virtualDOM, container</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> { type, props } = virtualDOM;
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> type === <span class="hljs-string">"string"</span>) {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> element = <span class="hljs-built_in">document</span>.createElement(type);
</div><div class="hljs-line">        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> props) {
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (!props.hasOwnProperty(key)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (key === <span class="hljs-string">'className'</span>) {
</div><div class="hljs-line">                element.setAttribute(<span class="hljs-string">'class'</span>, props[key]);
</div><div class="hljs-line">                <span class="hljs-keyword">continue</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (key === <span class="hljs-string">'style'</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> styOBJ = props[<span class="hljs-string">'style'</span>];
</div><div class="hljs-line">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> attr <span class="hljs-keyword">in</span> styOBJ) {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (!styOBJ.hasOwnProperty(attr)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                    element.style[attr] = styOBJ[attr];
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">continue</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (key === <span class="hljs-string">'children'</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> children = props[<span class="hljs-string">'children'</span>];
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (!<span class="hljs-built_in">Array</span>.isArray(children)) children = [children];
</div><div class="hljs-line">                children.forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> item === <span class="hljs-string">"string"</span>) {
</div><div class="hljs-line">                        element.appendChild(<span class="hljs-built_in">document</span>.createTextNode(item));
</div><div class="hljs-line">                        <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                    render(item, element);
</div><div class="hljs-line">                });
</div><div class="hljs-line">                <span class="hljs-keyword">continue</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            element.setAttribute(key, props[key]);
</div><div class="hljs-line">        }
</div><div class="hljs-line">        container.appendChild(element);
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div></code></pre>
  </div>
</body>

</html>